<template>
  <div class="ai-message-bubble">
    <div v-if="message.think"
         class="collapse-container">
      <div class="collapse-title"
           @click="collapseThink">
        <van-icon v-if="collapsed"
                  name="arrow" />
        <van-icon v-else
                  name="arrow-down" />
        {{ message.thinking ? '思考中' : '思考完成' }}
        <van-loading v-if="message.thinking"
                     class="think-loading"
                     type="spinner" />
      </div>
      <div class="think-part markdown-content"
           :style="{display: collapsed ? 'none' : 'block',borderBottom: message.thinking ?'none':'#999 1px dashed'}"
           v-html="renderMarkdown(message.think)" />
    </div>
    <div class="markdown-content"
         v-html="renderMarkdown(message.content)" />
    <div v-if="message.contextId && message.finished"
         class="options">
      <div class="options-item"
           @click="copy">
        <img :src="copyIcon">
      </div>
      <div class="options-item"
           @click="restart">
        <img :src="restartIcon">
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import {marked} from 'marked'
import {defineProps, ref, watch, defineEmits, onMounted} from 'vue'
import copyIcon from '@/assets/copy.svg'
import restartIcon from '@/assets/restart.svg'
import {CopyUtils} from "@/utils/CopyUtils.ts"
import {showSuccessToast} from 'vant'

const emit = defineEmits(['restart'])
const collapsed = ref<boolean>(false)
const {message} = defineProps<{
  message: any
}>()
const renderMarkdown = (content: any) => {
  if (!content) return ''
  return marked.parse(content)
}
const collapseThink = () => {
  collapsed.value = !collapsed.value
}
const copy = () => {
  CopyUtils.copy(message.content)
  showSuccessToast('复制成功')
}
const restart = () => {
  emit('restart', {contextId: message.contextId, chatId: message.chatId, input: message.input})
}
watch(() => message, (newValue: any) => {
  if (!newValue.thinking && !collapsed.value) {
    collapsed.value = true
  }
}, {deep: true})
onMounted(() => {
  if (message && !message.thinking && message.finished) {
    collapsed.value = true
  }
})
</script>
<style scoped>
.ai-message-bubble {
  background-color: #fff;
  border-radius: 8px;
  padding: 8px 12px;
  margin-left: 8px;
  margin-right: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  max-width: 70%;
  text-align: left;
  color: #333;
  position: relative;
}

.think-part {
  color: #999;
  font-size: 90%;
  transition: height 1s linear;
}

.collapse-container {
  overflow: hidden;
}

.collapse-title {
  cursor: pointer;
  border-radius: 10px;
  background: var(--van-primary-color);
  height: 20px;
  display: flex;
  width: fit-content;
  flex-direction: row;
  user-select: none;
  font-size: 15px;
  padding: 2px 12px;
  color: #fff;
  align-items: center;
  line-height: 1;
}

.think-loading {
  margin-left: 10px;
  display: block;
  width: 15px;
  height: 15px;
}

.options {
  display: flex;
  justify-content: flex-start;
}

.options-item {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  cursor: pointer;
  background: #d0e0fa;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  margin-top: 10px;
}

.options-item img {
  width: 15px;
  height: 15px;
  fill: #535bf2;
}
</style>
